<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>苏豫强的作业</title>

</head>
<style>
    * {
        font-size: 14px;
        text-align: center;
    }

    .lyb {
        width: 100%;
        height: 100px;
        border-bottom: 1px solid #ccc;
    }

    .sj {
        margin-top: 30px;
    }
</style>

<body>

    <div id="con">
        <!-- <div class="lyb">
            <h3>搶沙發</h3>
            <div>
                万籁听吹奏
            </div>
            <div class="sj">2021年12月16日14:21:14</div>
        </div>
        <div class="lyb">
            <h3>今天是周四，我给你留言了</h3>
            <div>
                只颐听秋水问蜉蝣
            </div>
            <div class="sj">2021年12月16日14:21:21</div>
        </div> -->
    </div>
    <div style="margin-top: 20px;">
        标题：<input type="text" id="title" style="margin-top: 10px;"><br>
        内容：<textarea name="" id="cont" cols="50" rows="8" style="margin-top: 10px;"></textarea><br>
        <button id="fashe">发布</button>
    </div>

    <script>
        window.onload = function () {
            document.getElementById('fashe').onclick = function () {
                var title = document.getElementById('title').value,
                    cont = document.getElementById('cont').value,
                    time = getNowTime()
                var obj = {
                    title: title,
                    cont: cont,
                    time: time
                }
                setlyb(obj)
                getlyb()
            }
            getlyb()
        }

        function setlyb(obj) {
            if (!localStorage.getItem('lylist')) {
                localStorage.setItem('lylist', JSON.stringify([obj]))
            } else {
                var data = JSON.parse(localStorage.getItem('lylist'))
                data.unshift(obj)
                localStorage.setItem('lylist', JSON.stringify(data))
            }
        }

        function getlyb() {
            if (!localStorage.getItem('lylist')) {
                return
            }
            var data = JSON.parse(localStorage.getItem('lylist')),
                str = "";
            for (let i in data) {
                str += `<div class="lyb">
                        <h3>${data[i].title}</h3>
                        <div>
                            ${data[i].cont}
                        </div>
                        <div class="sj">${data[i].time} <a href="#" onclick='del(${i})'>删除</a></div>
                    </div>`
            }
            document.getElementById('con').innerHTML = str
        }

        function del(index) {
            //先获取数据
            var data = JSON.parse(localStorage.getItem('lylist'))
            //截取数组 （下标和长度）
            data.splice(index, 1)
            //重新设置本地数据
            localStorage.setItem('lylist', JSON.stringify(data))
            //刷新列表
            getlyb()
        }
        //获取当前时间
        function getNowTime() {
            var dtime = new Date();
            var nian = dtime.getFullYear(),
                yue = dtime.getMonth() + 1,
                day = dtime.getDate(),
                hours = dtime.getHours(),
                fen = dtime.getMinutes(),
                miao = dtime.getSeconds()
            return nian + "-" + yue + "-" + day + " " + hours + ":" + fen + ":" + miao
        }
    </script>











</body>

</html>